<style scoped>

</style>

<template>
  <a-layout-sider width="200" style="background: #fff">
    <a-menu
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys"
      mode="inline"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/> &nbsp; 欢迎 
        </router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <!-- 点击路由跳转的标签 "rooter-link" -->
        <router-link to="/about">
          <user-outlined/> &nbsp; 关于
        </router-link>
      </a-menu-item>

      <!-- 会员管理 -->
      <a-sub-menu key="member">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            会员管理
          </span>
        </template>
        <a-menu-item key="/member/ticket">
          <router-link to="/member/ticket">
            <user-outlined/> &nbsp; 会员车票
          </router-link>
        </a-menu-item>
      </a-sub-menu>

      <!-- 跑批管理 -->
      <a-sub-menu key="batch">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            跑批管理
          </span>
        </template>
        <a-menu-item key="/batch/job">
          <router-link to="/batch/job">
            <user-outlined/> &nbsp; 任务管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>

      <!-- 基础数据 -->
      <a-sub-menu key="base">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            基础数据
          </span>
        </template>
        <a-menu-item key="/base/station">
          <router-link to="/base/station">
            <car-outlined/> &nbsp; 车站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train">
          <router-link to="/base/train">
            <HomeOutlined /> &nbsp; 火车管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-tation">
          <router-link to="/base/train-tation">
            <HomeOutlined /> &nbsp; 火车车站
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-carriage">
          <router-link to="/base/train-carriage">
            <HomeOutlined /> &nbsp; 火车车厢
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-seat">
          <router-link to="/base/train-seat">
            <HomeOutlined /> &nbsp; 火车座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>

      <!-- 业务管理 -->
      <a-sub-menu key="business">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            业务管理
          </span>
        </template>
        <a-menu-item key="/business/sk_token">
          <router-link to="/business/sk_token">
            <HomeOutlined /> &nbsp; 令牌余量
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/confirm-order">
          <router-link to="/business/confirm-order">
            <HomeOutlined /> &nbsp; 订单信息
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-ticket">
          <router-link to="/business/daily-train-ticket">
            <HomeOutlined /> &nbsp; 余票查询
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train">
          <router-link to="/business/daily-train">
            <HomeOutlined /> &nbsp; 每日车次
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-tation">
          <router-link to="/business/daily-train-tation">
            <HomeOutlined /> &nbsp; 每日车站
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-carriage">
          <router-link to="/business/daily-train-carriage">
            <HomeOutlined /> &nbsp; 每日车厢
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-seat">
          <router-link to="/business/daily-train-seat">
            <HomeOutlined /> &nbsp; 每日座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { defineComponent,ref,watch } from 'vue';
import router from '@/router';
import { UnorderedListOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: "main-sider-view",
    setup() {
        const selectedKeys = ref([]);
        const openKeys = ref([]);
        watch(
        // 监听当前的路由页面的变化
        () => router.currentRoute.value.path, 
        // 当路由发生变化的时候执行的回调函数
        (newPath) => {
            console.log('watch', newPath);
            // 先清空selectedKeys数组中的值
            selectedKeys.value = [];
            // 将当前变化的值添加到selectedKeys数组中
            selectedKeys.value.push(newPath);
        }, 
        // 强制立即执行回调
        { immediate: true });
        return {
            selectedKeys,
            openKeys
        };
    },
    components: { UnorderedListOutlined }
});
</script>